font |
您所在的位置:网站首页 › font weight属性作用 › font |
font-weight失效移动安卓处理方法
1、BUG 现象
最近遇到一个奇怪的现象:一段文本设置了font-weight,但是在移动端中的浏览器中不显示加粗。 左侧是浏览器中移动端模拟器中的界面,可以看到对话框的标题和按钮文字是加粗的,右侧是真机开发中的对话框,标题和按钮文本是不加粗的。多次测试,中文不会加粗,英文正常。浏览器兼容性测试后也没问题,各种浏览器都是这样的。 很郁闷。 查阅了很多资料,最后发现是移动端设备字体的问题 首先,font-weight 取值范围是 100-900 ,默认的是 400 400 对应 normal 700 对应 bold(加粗) 在 PC 中,字体很多,如果设置 font-weight 是 500 600 可以正确显示。但是在移动端下,字体有限,所以设置 500 和 600 是无效的。根据图中缺失填充的方法,如果缺少 500 ,那么会向下取值400。这就是移动端上,设置 font-weight: 400 和 font-weight: 500 粗细相同的原因。 3、解决方法我想到两种解决方法 方法一:移动端和PC端的字体都设置成通用,即 font-weight: normal 或者 font-weight: bold; 优点:这两个值各种字体都可以取到,兼容性好,改动简单 缺点:PC 端字体粗细没有明确划分,可能和设计图纸不同 方法二:PC 端设置字体是 font-weight:: 500 600, 然后CSS的媒体查询,设置 bold. 这样可以保证PC端字体粗细合适,移动端不会出错。 /* 移动端设置通用加粗 */ @media screen and (max-width: 991.8px) { .span1, .span2, .span3 { font-weight: bold; } } /* PC端设置不同程度的加粗 */ @media screen and (min-width: 991.8px) { .span1 { font-weight: 500; } .span2 { font-weight: 600; } .span3 { font-weight: 700; } }4、参考资料 https://baike.baidu.com/item/font-weight https://developers.weixin.qq.com/community/develop/doc/000686a28a00a05646d71125251000 https://segmentfault.com/a/1190000007787731?utm_source=tag-newest https://blog.csdn.net/weixin_33774615/article/details/89133521 https://blog.csdn.net/weixin_43974907/article/details/94446536 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |